<template>
  <div class="login-container">
    <div class="login-box">
      <div class="logo">
        <h1 class="login-title">七尾MES</h1>
      </div>
      <h2 class="welcome-text">欢迎登录</h2>
      
      <form class="login-form" @submit.prevent="handleLogin">
        <div class="form-group">
          <input 
            type="text" 
            id="username" 
            v-model="form.username" 
            placeholder=" "
            autocomplete="username"
          >
          <label for="username">账号</label>
          <div class="underline"></div>
        </div>
        
        <div class="form-group">
          <input 
            type="password" 
            id="password" 
            v-model="form.password" 
            placeholder=" "
            autocomplete="current-password"
          >
          <label for="password">密码</label>
          <div class="underline"></div>
        </div>
        
        <div class="forgot-password">
          忘记密码请联系客服
        </div>
        
        <button type="submit" class="login-button">
          <span>登录</span>
          <svg width="34" height="34" viewBox="0 0 74 74" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="37" cy="37" r="35.5" stroke="white" stroke-width="3"></circle>
            <path d="M25 35.5C24.1716 35.5 23.5 36.1716 23.5 37C23.5 37.8284 24.1716 38.5 25 38.5V35.5ZM49.0607 38.0607C49.6464 37.4749 49.6464 36.5251 49.0607 35.9393L39.5147 26.3934C38.9289 25.8076 37.9792 25.8076 37.3934 26.3934C36.8076 26.9792 36.8076 27.9289 37.3934 28.5147L45.8787 37L37.3934 45.4853C36.8076 46.0711 36.8076 47.0208 37.3934 47.6066C37.9792 48.1924 38.9289 48.1924 39.5147 47.6066L49.0607 38.0607ZM25 38.5L48 38.5V35.5L25 35.5V38.5Z" fill="white"></path>
          </svg>
        </button>
      </form>
      
      <div class="footer">
        <p>© 2023 七尾网盟工作室</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue';

const form = reactive({
  username: '',
  password: ''
});

const handleLogin = () => {
  console.log('登录信息:', form);
  // 这里添加实际的登录逻辑
};
</script>

<style scoped>
.login-container {
  /* padding-top: -20px; */
  margin-top: -60px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.login-box {
  width: 380px;
  padding: 40px 50px;
  background-color: white;
  border-radius: 16px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.login-box::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
  transform: rotate(45deg);
  pointer-events: none;
}

.logo {
  margin-bottom: 15px;
}

.login-title {
  font-size: 28px;
  color: #4a5568;
  margin-bottom: 10px;
  font-weight: 600;
  letter-spacing: 1px;
}

.welcome-text {
  font-size: 18px;
  color: #718096;
  margin-bottom: 30px;
  font-weight: normal;
}

.login-form {
  margin-top: 30px;
}

.form-group {
  position: relative;
  margin-bottom: 30px;
  text-align: left;
}

.form-group input {
  width: 100%;
  padding: 15px 0 5px 0;
  border: none;
  border-bottom: 1px solid #e2e8f0;
  font-size: 16px;
  background-color: transparent;
  transition: all 0.3s ease;
}

.form-group input:focus {
  outline: none;
  border-bottom-color: #667eea;
}

.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label {
  transform: translateY(-20px);
  font-size: 12px;
  color: #667eea;
}

.form-group label {
  position: absolute;
  left: 0;
  top: 15px;
  color: #718096;
  font-size: 16px;
  transition: all 0.3s ease;
  pointer-events: none;
}

.underline {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #667eea, #764ba2);
  transition: width 0.3s ease;
}

.form-group input:focus ~ .underline {
  width: 100%;
}

.forgot-password {
  text-align: right;
  font-size: 13px;
  color: #a0aec0;
  margin-bottom: 30px;
  cursor: pointer;
  transition: color 0.3s;
}

.forgot-password:hover {
  color: #667eea;
}

.login-button {
  width: 100%;
  padding: 15px;
  background: linear-gradient(90deg, #667eea, #764ba2);
  color: white;
  border: none;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  overflow: hidden;
  position: relative;
}

.login-button span {
  position: relative;
  z-index: 2;
}

.login-button svg {
  position: relative;
  z-index: 2;
  transition: transform 0.3s ease;
}

.login-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.login-button:hover svg {
  transform: translateX(5px);
}

.login-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #764ba2, #667eea);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.login-button:hover::before {
  opacity: 1;
}

.footer {
  margin-top: 40px;
  font-size: 12px;
  color: #a0aec0;
}

@media (max-width: 480px) {
  .login-box {
    width: 90%;
    padding: 30px;
  }
}
</style>